<template>
	<view class="list">
		<!-- <nav-bar class="i_top" isBack>
			<view class="i_tCan" slot="center">
				<view :class="{active:tab == 0}" @click="tabtop(0)">看案例<text></text></view>
				<view :class="{active:tab == 1}" @click="tabtop(1)">3D装修<text></text></view>
			</view>
		</nav-bar> -->
		<nav-bars class="i_top" bgColor="#fff" fontColor="#000">
			<view class="i_tCan" slot="default">
				<view :class="{active:tab == 1}" @click="tabtop(1)">3D装修<text></text></view>
				<view :class="{active:tab == 0}" @click="tabtop(0)">看案例<text></text></view>
			</view>
		</nav-bars>
		<!-- 筛选框 -->
		<view class="l_top" :class="{'isOver': selectIsOver}" :style="{'top': navHeight + 'px'}">
			<view class="l_tFilt">
				<view class="l_tText" @tap="selectToggle">
					<view class="l_tIcon" :class="{'active': selectBox}"></view>
					<text>{{selectText ? selectText : '筛选'}}</text>
				</view>
			</view>
			<view class="l_tPop" :class="{'active': selectBox}" @touchmove.stop.prevent="moveHandle">
				<view class="l_tBg" @tap="selectToggle"></view>
				<view class="l_tBox">
					<view class="l_search">
						<view class="l_sList">
							<view class="l_sItem">
								<view class="l_sLabel">户型</view>
								<view class="l_sVal">
									<scroll-view class="l_sCan" scroll-x>
										<view class="l_sTags">
											<view class="l_sTag" v-for="(item, index) in bedroom" :key="index"
												:class="{'active': selectroom === item.value}"
												@tap="selectTag('selectroom', item.value, item.name)">{{item.name}}
											</view>
										</view>
									</scroll-view>
								</view>
							</view>
							<view class="l_sItem">
								<view class="l_sLabel">面积</view>
								<view class="l_sVal">
									<scroll-view class="l_sCan" scroll-x>
										<view class="l_sTags">
											<view class="l_sTag" v-for="(item, index) in area_section" :key="index"
												:class="{'active': selectArea === item.value}"
												@tap="selectTag('selectArea', item.value, item.name)">{{item.name}}
											</view>
										</view>
									</scroll-view>
								</view>
							</view>
							<view class="l_sItem">
								<view class="l_sLabel">风格</view>
								<view class="l_sVal">
									<scroll-view  scroll-x class="l_sCan">
										<!-- <view class="l_sTags">
											<view class="l_sTag" v-for="(item, index) in design_style" :key="index"
												:class="{'active': selectStyle === item.id}"
												@tap="selectTag('selectStyle', item.id, item.name)">{{item.name}}</view>
										</view> -->
										<view >
											<view class="l_sTags">
												<view class="l_sTag" :class="{'active': StyleSelect.indexOf(item.id)!=-1}"
													v-for="(item, index) in design_style" :key="index"
													@tap="tapStyle(item.id,item.name)">{{item.name}}</view>
											</view>
										</view>
									</scroll-view>
								</view>
							</view>
							<view class="l_sItem">
								<view class="l_sLabel">预算</view>
								<view class="l_sVal">
									<scroll-view class="l_sCan" scroll-x>
										<!-- <view class="l_sTags">
											<view class="l_sTag" v-for="(item, index) in budget_section" :key="index"
												:class="{'active': selectFee === item.value}"
												@tap="selectTag('selectFee', item.value, item.name)">{{item.name}}
											</view>
										</view> -->
										<view class="l_sCan">
											<view class="l_sTags">
												<view class="l_sTag" :class="{'active': rSelect.indexOf(item.value)!=-1}"
													v-for="(item, index) in budget_section" :key="index"
													@tap="tapInfo(item.value,item.name)">{{item.name}}</view>
											</view>
										</view>
									</scroll-view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="l_search">
			<view class="l_sList" id="searchBox">
				<view class="l_sItem">
					<view class="l_sLabel">户型</view>
					<view class="l_sVal">
						<view class="l_sCan">
							<view class="l_sTags">
								<view class="l_sTag" v-for="(item, index) in bedroom" :key="index"
									:class="{'active': selectroom === item.value}"
									@tap="selectTag('selectroom', item.value, item.name)">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="l_sItem">
					<view class="l_sLabel">面积</view>
					<view class="l_sVal">
						<view class="l_sCan">
							<view class="l_sTags">
								<view class="l_sTag" v-for="(item, index) in area_section" :key="index"
									:class="{'active': selectArea === item.value}"
									@tap="selectTag('selectArea', item.value, item.name)">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="l_sItem">
					<view class="l_sLabel">风格</view>
					<view class="l_sVal">
						<!-- <view class="l_sCan">
							<view class="l_sTags">
								<view class="l_sTag" v-for="(item, index) in design_style" :key="index"
									:class="{'active': selectStyle === item.id}"
									@tap="selectTag('selectStyle', item.id, item.name)">{{item.name}}</view>
							</view>
						</view> -->
						<view class="l_sCan">
							<view class="l_sTags">
								<view class="l_sTag" :class="{'active': StyleSelect.indexOf(item.id)!=-1}"
									v-for="(item, index) in design_style" :key="index"
									@tap="tapStyle(item.id,item.name)">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="l_sItem">
					<view class="l_sLabel">预算</view>
					<view class="l_sVal">
						<!-- <view class="l_sCan">
							<view class="l_sTags">
								<view class="l_sTag" v-for="(item, index) in budget_section" :key="index"
									:class="{'active': selectFee === item.value}"
									@tap="selectTag('selectFee', item.value, item.name)">{{item.name}}</view>
							</view>
						</view> -->
						<view class="l_sCan">
							<view class="l_sTags">
								<view class="l_sTag" :class="{'active': rSelect.indexOf(item.value)!=-1}"
									v-for="(item, index) in budget_section" :key="index"
									@tap="tapInfo(item.value,item.name)">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="livePlay" v-if="tab == 0">
			<view class="livePlayView">
				<view class="livePlayMain">
					<view class="livePlayItem" v-for="(item,index) in RecommendLisr" :key="index"
						@tap="toDetail(item.id)">
						<view class="livePlaybg">
							<image :src="item.thumb_url[0].path">
							</image>
							<view class="tips" style="">
								<view class="tips_icon" style="">
									<u-icon name="heart-fill" color="#fff" size="20"></u-icon>
									<text style="">推荐</text>
								</view>
							</view>
						</view>
						<view class="Main_view" style="">
							<view class="Main_title ellipsisText" style="">{{item.title}}</view>
							<view>
								{{item.offer}}
								<text style="">万</text>
							</view>
						</view>
					</view>
					<!-- <view class="last_item" style="">
						<view class="last_item_view" style="">
							<text class="look_more" style="">查看更多</text>
							<view >
								<u-icon  size="20" name="https://cos.ryz1620.com/liankun/static/goRight.png"></u-icon>
							</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="livePlay" v-if="tab == 1">
			<view class="livePlayView">
				<view class="livePlayMain">
					<view class="livePlayItem" v-for="(item,index) in RecommendLisr" :key="index"
						@tap="toDetail(item.id)">
						<view class="livePlaybg">
							<image :src="item.thumb_url[0].path">
							</image>
							<view class="tips" style="">
								<view class="tips_icon" style="">
									<u-icon name="heart-fill" color="#fff" size="20"></u-icon>
									<text style="">推荐</text>
								</view>
							</view>
							<view class="i_tBtns" @tap.stop="dviewr(item)" v-if="item.display_url">
								<view class="i_tbImgs">
									<image src="@/static/home/3d.png"></image>
								</view>
								<view class="i_tbTxts">3D</view>
							</view>
						</view>
						<view class="Main_view" style="">
							<view class="Main_title ellipsisText" style="">{{item.title}}</view>
							<view>
								{{item.offer}}
								<text style="">万</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 数据列表 -->
		<view class="l_data">
			<view class="l_dContain">
				<view class="l_dCan">
					<!-- 装修案例 -->
					<view class="l_dList">
						<view class="l_dDemo">
							<view class="no-card" v-if="demoList.length==0">
								<image src="https://manager.ryz1620.com/static/my/sm.png"></image>
								<text>暂无案例~</text>
							</view>
							<view v-for="item in demoList" :key="item.id">
								<view class="l_ddItem" @tap="toDetail(item.id)">
									<view class="l_ddBanner">
										<image :src="item.thumb_url[0].path"></image>
										<view class="i_tBtn" @tap.stop="dviewr(item)"
											v-if="item.display_url">
											<view class="i_tbImg">
												<image src="@/static/home/3d.png"></image>
											</view>
											<view class="i_tbTxt">3D</view>
										</view>
									</view>
									<view class="l_ddInfo">
										<view class="l_ddTag" v-if="item.design_style"><text
												v-for="(items,index) in item.design_style"
												:key="index">{{items.name}}</text></view>
										<view class="l_ddCont">
											<view class="l_ddVal">
												<text class="pR-32">报价：{{item.offer}}万</text>
												<text>{{item.area}}m²</text><text class="l_ddCutLine"></text>
												<text>{{item.house_type}}</text><text class="l_ddCutLine"></text>
											</view>
										</view>
									</view>
									<view class="l_ddRemark">{{item.title}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import service_design from '@/service/design'
	import service_recommend from '@/service/recommend.js'
	export default {
		data() {
			return {
				demoList: [],
				// 筛选框
				selectTop: 0,
				budget_section: [],
				area_section: [],
				design_style: [],
				tab: 1,
				bedroom: [{
						id: 1,
						name: "一室",
						value: "1"
					},
					{
						id: 2,
						name: "二室",
						value: "2"
					},
					{
						id: 3,
						name: "三室",
						value: "3"
					},
					{
						id: 4,
						name: "四室",
						value: "4"
					},
					{
						id: 5,
						name: '五室',
						value: 5,
					},
					{
						id: 6,
						name: "五室及以上",
						value: "5,20"
					}
					// {
					// 	id: 5,
					// 	name: "复式",
					// 	value: "6,10"
					// },
					// {
					// 	id: 6,
					// 	name: "别墅",
					// 	value: "10,20"
					// }
				],
				selectIsOver: false,
				selectArea: '',
				selectStyle: '',
				selectroom: '',
				selectFee: '',
				selectText: '',
				selectBox: false,
				designerId: '',
				currentPage: 1,
				RecommendLisr: [],
				RecommendType: 1,
				rSelect: [],  //预算
				rSelectText:[],
				StyleSelect:[],//风格多选
				StyleText:[]//风格多选文字
			}
		},

		computed: {
			navHeight() { // Nav栏高度
				var navHeights = uni.getStorageSync('StatusBarHeight')
				return navHeights.height
			},
		},

		onLoad(params) {
			this.$utils.getUrl()
			if (params.tab) {
				this.tab = params.tab
				this.RecommendType = params.tab
			}
			this.getOptions()
			this.getList()
			this.getRecommend()
		},

		onReady() {
			let _this = this
			// 获取筛选框高度
			let Query = uni.createSelectorQuery()
			Query.select("#searchBox").boundingClientRect(data => {
				if (data.height) _this.selectTop = data.height
			}).exec()
		},

		onPageScroll(e) {
			if (this.selectTop && e.scrollTop > this.selectTop) {
				if (!this.selectIsOver) this.selectIsOver = true
			} else {
				if (this.selectIsOver) this.selectIsOver = false
				if(e.scrollTop !== 0 && this.demoList.length > 0){
					// console.log(1);
					this.selectIsOver = false
				}else{
					// console.log(2);
					this.selectIsOver = true
				}
			}
			
		},
		onReachBottom() {
			this.currentPage++
			let params = {
				designerId: this.designerId,
				bedroom_num: this.selectroom,
				style: this.selectStyle,
				area: this.selectArea,
				offer: this.selectFee,
				page: this.currentPage,
				pagesize: 15,
				is_display: this.RecommendType
			}
			service_design.getDemoList(params)
				.then(res => {
					if (res.code == 1) {
						let data = res.data
						// 处理数据
						for (let i = 0; i < data.length; i++) {
							this.demoList.push(data[i])
						}
					}
				})
		},
		methods: {
			tapInfo(e,name) {
				if (this.rSelect.indexOf(e) == -1 && this.rSelectText.indexOf(name) == -1) {
					this.rSelect.push(e); //选中添加到数组里
					this.rSelectText.push(name)
				} else {
					this.rSelect.splice(this.rSelect.indexOf(e), 1); //取消
					this.rSelectText.splice(this.rSelectText.indexOf(name), 1);
				}
				this.selectFee = this.rSelect.join('|')
				this.selectText = this.rSelectText.join('|')
				this.getList()
			},
			tapStyle(e,name){
				if (this.StyleSelect.indexOf(e) == -1 && this.StyleText.indexOf(name) == -1) {
					this.StyleSelect.push(e); //选中添加到数组里
					this.StyleText.push(name)
				} else {
					this.StyleSelect.splice(this.StyleSelect.indexOf(e), 1); //取消
					this.StyleText.splice(this.StyleText.indexOf(name), 1);
				}
				this.selectStyle = this.StyleSelect.join(',')
				this.selectText = this.StyleText.join(',')
				console.log(this.StyleSelect,this.selectText);
				this.getList()
			},
			dviewr(item) {
				let url = encodeURIComponent(item.display_url)
				uni.navigateTo({
										url: '/pages_3D/pages/3D/panorama?url=' + url
				}); 
				// if(item.light_design_id){
				// 	 uni.navigateTo({
				// 		url: '/pages_3D/pages/3D/degin?obsEasyDesignId=' + item.light_design_id
				// 	 }); 
				// }else{
					 
				// }	
			},
			tabtop(e) {
				this.tab = e
				if (e == 0) {
					this.currentPage = 1
					this.selectArea = ''
					this.selectStyle = ''
					this.selectroom = ''
					this.selectFee = ''
					this.selectText = ''
					this.demoList = []
					this.RecommendType = 0
					this.getList()
				} else {
					this.currentPage = 1
					this.selectArea = ''
					this.selectStyle = ''
					this.selectroom = ''
					this.selectFee = ''
					this.selectText = ''
					this.demoList = []
					this.RecommendType = 1
					this.getList()
					this.getRecommend()
				}
			},

			getRecommend() {
				// RecommendLisr:[],
				// RecommendType:0,
				// 
				service_recommend.getRecommendCase({
						type: this.RecommendType
					})
					.then(res => {
						if (res.code == 1) {
							console.log(res);
							var dataList = res.data
							this.RecommendLisr = dataList
						}
					})
			},
			// 获取筛选条件
			getOptions() {
				service_design.getOptionList()
					.then(res => {
						if (res.code == 1) {
							let data = res.data
							this.budget_section = data.budget_section
							this.area_section = data.area_section
							this.design_style = data.design_style
						}
					})
			},

			// 获取数据列表
			getList() {
				let params = {
					designerId: this.designerId,
					bedroom_num: this.selectroom,
					style: this.selectStyle,
					area: this.selectArea,
					offer: this.selectFee,
					page: this.currentPage,
					pagesize: 15,
					is_display: this.RecommendType
				}
				service_design.getDemoList(params)
					.then(res => {
						if (res.code == 1) {
							let data = res.data
								this.demoList = data
							// 处理数据
							// for (let i = 0; i < data.length; i++) {
							// 	this.demoList.push(data[i])
							// }
						}
					})
			},
			// 获取数据列表
			// get3dList() {
			// 	let params = {
			// 		designerId: this.designerId,
			// 		bedroom_num: this.selectroom,
			// 		style: this.selectStyle,
			// 		area: this.selectArea,
			// 		offer: this.selectFee,
			// 		page: this.currentPage,
			// 		pagesize: 15,
			// 	}
			// 	service_design.getDemoLists(params)
			// 		.then(res => {
			// 			if (res.code == 1) {
			// 				let data = res.data
			// 				// 处理数据
			// 				for (let i = 0; i < data.length; i++) {
			// 					this.demoList.push(data[i])
			// 				}
			// 			}
			// 		})
			// },

			toDetail(caseId) {
				uni.navigateTo({
					url: '/pages_design/pages/design/demo/demo?caseId=' + caseId
				})
			},

			// 筛选框==
			// 选择筛选条件
			selectTag(type, id, name) {
				if (this[type] !== id) {
					this[type] = id
					let selectText = ''
					console.log(type)
					// 户型
					let selectroom = this.selectroom
					let selectroomList = this.bedroom
					if (selectroom !== null) {
						for (let i = 0; i < selectroomList.length; i++) {
							if (selectroomList[i].id === selectroom) {
								selectText += selectroomList[i].name + ' | '
								break
							}
						}
					}
					// 面积
					let selectArea = this.selectArea
					let selectAreaList = this.area_section
					if (selectArea !== null) {
						for (let i = 0; i < selectAreaList.length; i++) {
							if (selectAreaList[i].id === selectArea) {
								selectText += selectAreaList[i].name + ' | '
								break
							}
						}
					}
					// 风格
					let selectStyle = this.selectStyle
					let selectStyleList = this.design_style
					if (selectStyle !== null) {
						for (let i = 0; i < selectStyleList.length; i++) {
							if (selectStyleList[i].id === selectStyle) {
								selectText += selectStyleList[i].name + ' | '
								break
							}
						}
					}
					// 预算
					let selectFee = this.selectFee
					let selectFeeList = this.budget_section
					if (selectFee !== null) {
						for (let i = 0; i < selectFeeList.length; i++) {
							if (selectFeeList[i].id === selectFee) {
								selectText += selectFeeList[i].name + ' | '
								break
							}
						}
					}
					this.selectText = selectText.slice(0, selectText.length - 2)
				} else {
					if (type == 'selectArea') {
						this.selectArea = ''
					} else if (type == 'selectStyle') {
						this.selectStyle = ''
					} else if (type == 'selectFee') {
						this.selectFee = ''
					} else {
						this.selectroom = ''
					}
				}
				this.currentPage = 1
				this.demoList = []
				this.getList()
			},

			// 展示隐藏筛选框
			selectToggle() {
				console.log(this.selectIsOver);
				if (this.selectIsOver) {
					this.selectBox = !this.selectBox
				}
			},

			moveHandle() {},
		}
	}
</script>

<style lang="scss" scoped>
	.curList {
		color: white;
		border: 1px solid #e5e5e5;
		background-color: #ff5d00;
	}

	.list {
		min-height: 100vh;
		background: #fff;
	}

	.ellipsisText {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.list .i_top {
		position: relative;
		z-index: 100;

		.i_tCan {
			width: 100%;
			height: 66rpx;
			padding-left: 50rpx;
			padding-right: 50rpx;

			view {
				display: inline-block;
				width: 50%;
				text-align: center;
				line-height: 66rpx;
				position: relative;
				color: #333;
				font-size: 30rpx;
				margin: 0 10rpx;
			}

			.active {
				text {
					position: absolute;
					bottom: 0;
					left: 50%;
					margin-left: -20rpx;
					display: block;
					width: 40rpx;
					height: 8rpx;
					border-radius: 8rpx;
					background: #FFD425;
				}
			}
		}

	}

	// 筛选框=====
	.l_top {
		width: 100vw;
		height: 80rpx;
		background: #fff;
		position: fixed;
		left: 0;
		z-index: 3;

		&.isOver {
			box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, .16);
		}

		.l_tFilt {
			height: 100%;
			background: #fff;
			position: relative;
			z-index: 2;
		}

		.l_tText {
			height: 80rpx;
			line-height: 80rpx;
			color: #a98f68;
			font-size: 24rpx;
			padding: 0 24rpx 0 40rpx;
			position: relative;
			float: left;
		}

		.l_tIcon {
			margin-top: -4rpx;
			border: 8rpx solid transparent;
			border-top-color: #a58f6d;
			position: absolute;
			top: 50%;
			right: 0;
			transition: transform .3s;
			transform: rotate(0);
			transform-origin: 50% 25%;

			&.active {
				transform: rotate(180deg);
				transform-origin: 50% 25%;
			}
		}

		.l_tPop {
			width: 100%;
			height: 100vh;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			visibility: hidden;
			transition: visibility .3s;

			&.active {
				visibility: visible;

				.l_tBg {
					opacity: 1;
				}

				.l_tBox {
					transform: translateY(0);
				}
			}
		}

		.l_tBg {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .6);
			opacity: 0;
			transition: opacity .3s;
		}

		.l_tBox {
			width: 100%;
			position: absolute;
			top: 0;
			transition: transform .3s;
			transform: translateY(-100%);
		}
	}

	.list .l_search {
		padding-top: 80rpx;
		background: #fff;
		position: relative;
		z-index: 2;
		border-bottom: 4rpx solid #f4f4f4;

		.l_sList {
			padding: 0 0 16rpx 40rpx;
		}

		.l_sItem {
			height: 50rpx;
			margin-top: 20rpx;

			&:nth-child(1) {
				margin-top: 0;
			}
		}

		.l_sLabel {
			line-height: 52rpx;
			font-weight: bold;
			padding-right: 40rpx;
			float: left;
		}

		.l_sVal {
			height: 50rpx;
			overflow: hidden;
		}

		.l_sCan {
			height: 80rpx;
			overflow-x: auto;
		}

		.l_sTags {
			white-space: nowrap;
		}

		.l_sTag {
			height: 50rpx;
			line-height: 50rpx;
			font-size: 24rpx;
			padding: 0 20rpx;
			display: inline-block;

			&.active {
				color: #a98f68;
				border-radius: 26rpx;
				background: #f9f6f3;
			}

			&:nth-last-child(1) {
				margin-right: 20rpx;
			}
		}
	}

	.livePlay {
		// margin-top: 24rpx;
		padding: 18rpx 0rpx 4rpx 0rpx;
		// margin-left: 32rpx;
		background: #fff;
		border-bottom: 4rpx solid #f4f4f4;

		.livePlayView {
			overflow: hidden;

			.livePlayMain {
				// white-space: nowrap;
				overflow-x: auto;
				display: flex;
				// align-items: flex-start;
				padding-bottom: 14rpx;
				padding-left: 32rpx;

				.livePlayItem {
					margin-right: 24rpx;
					display: inline-block;

					border-radius: 8rpx;

					box-shadow: 0rpx 0rpx 20rpx rgba(0, 0, 0, 0.06);

					.livePlaybg {
						width: 332rpx;
						height: 170rpx;
						border-radius: 8rpx 8rpx 0 0;
						position: relative;
						overflow: hidden;
						// padding: 42rpx 24rpx 0 24rpx;
					}

					.tips {
						position: absolute;
						top: 16rpx;
						left: 0;

						.tips_icon {
							width: 100rpx;
							height: 38rpx;
							background: #C3AB7C;
							display: flex;
							align-items: center;
							justify-content: center;
							background: url(https://cos.ryz1620.com/liankun/static/tips.png) no-repeat;
							background-size: 100% 100%;
							margin-left: -10rpx;

							text {
								font-size: 20rpx;
								font-weight: 400;
								color: #FFFFFF;
								margin-left: 4rpx;
							}
						}
					}

					.Main_view {
						padding: 18rpx 24rpx;
						font-size: 24rpx;
						color: #333333;

						.Main_title {
							margin-bottom: 8rpx;
							// display: inline;
							// word-wrap: break-word; 
							// word-break: break-all; 
						}

						text {
							font-size: 16rpx;
							font-weight: 400;
							line-height: 36rpx;
							color: #0D1019;
							margin-left: 4rpx;
						}
					}

				}

				.i_tBtns {
					width: 102rpx;
					height: 102rpx;
					background: rgba(0, 0, 0, .4);
					border-radius: 50%;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 2;
				}

				.i_tbImgs {
					width: 42rpx;
					height: 42rpx;
					margin: 20rpx auto 0;
				}

				.i_tbTxts {
					width: 100%;
					height: 34rpx;
					line-height: 34rpx;
					text-align: center;
					color: #fff;
					font-size: 24rpx;
					position: absolute;
					top: 58rpx;
					left: 0;
				}

				.last_item {
					background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(195, 171, 124, 0.38) 100%);
					height: 287rpx;
					width: 84rpx;
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					cursor: pointer;

					.last_item_view {
						width: 84rpx;
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;

						.look_more {
							writing-mode: vertical-lr;
							text-align: center;
							font-size: 28rpx;
							font-weight: 400;
							color: #333333;
						}
					}
				}
			}
		}
	}

	// 数据列表（案例、动态、评价）=====
	.list .l_data {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	// 数据列表
	.list .l_data .l_dList {
		background: #fff;
	}

	// 设计案例 底线
	.list .l_data .l_dDemo .l_ddItem {
		position: relative;

		&::after {
			content: "";
			height: 1px;
			background: #f4f4f4;
			position: absolute;
			bottom: 0;
			left: 32rpx;
			right: 32rpx;
			transform: scaleY(.5);
		}

		&:nth-last-child(1)::after {
			content: none;
		}
	}

	// 装修案例
	.list .l_data .l_dDemo {
		padding: 28rpx 0 40rpx;

		.l_ddItem {
			padding: 42rpx 0 40rpx;

			&:nth-child(1) {
				padding-top: 0;
			}
		}

		.l_ddBanner {
			height: 376rpx;
			margin: 0 32rpx;
			border-radius: 8rpx;
			background: #f0f0f0;
			overflow: hidden;
			position: relative;
		}

		.l_ddInfo {
			line-height: 34rpx;
			font-size: 24rpx;
			margin: 18rpx 32rpx 0;
		}

		.l_ddTag {
			height: 36rpx;
			line-height: 36rpx;
			color: #a98f68;
			font-size: 20rpx;
			padding: 0 20rpx;
			margin-top: -2rpx;
			margin-right: 16rpx;
			border-radius: 18rpx;
			background: #f9f6f3;
			float: left;
		}

		.l_ddCont {
			overflow: hidden;
		}

		.l_ddVal {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}

		.l_ddCutLine {
			width: 1px;
			height: 12rpx;
			margin: 0 8rpx;
			background: #333;
			display: inline-block;

			&:nth-last-child(1) {
				display: none;
			}
		}

		.l_ddRemark {
			line-height: 44rpx;
			font-size: 32rpx;
			font-weight: bold;
			padding-left: 36rpx;
			margin-top: 8rpx;
		}
	}

	.no-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx 20rpx 0 0;
		padding-top: 40rpx;
	}

	.no-title {
		padding: 30rpx 0;
	}

	.no-card>text {
		font-size: 24rpx;
		color: #999;
	}

	.no-bnt {
		padding: 10rpx 20rpx;
		margin: 20rpx;
		border: 2rpx solid #eee;
		font-size: 26rpx;
		background-color: #fff;
	}

	.no-card image {
		height: 240rpx;
		width: 240rpx;
		padding: 40rpx;
	}

	.i_tBtn {
		width: 102rpx;
		height: 102rpx;
		background: rgba(0, 0, 0, .4);
		border: 1px solid #fff;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
	}

	.i_tbImg {
		width: 42rpx;
		height: 42rpx;
		margin: 20rpx auto 0;
	}

	.i_tbTxt {
		width: 100%;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		position: absolute;
		top: 58rpx;
		left: 0;
	}
</style>
